<template>
  <div class="dispricing">
    <searchCard @onSearch="searchFn" @onReset="resetFn">
      <el-form :model="dishbomForm" label-width="auto" inline @keyup.enter="searchFn">
        <el-form-item label="菜品编码：">
          <pb-input v-model="dishbomForm.dishCode" placeholder="请输入菜品编码"></pb-input>
        </el-form-item>
        <el-form-item label="菜品名称：">
          <pb-input v-model="dishbomForm.dishName" placeholder="请输入菜品名称"></pb-input>
        </el-form-item>
        <el-form-item label="定价方式：">
          <pb-check :list="priList" @change="SetpricingFn($event)"></pb-check>
        </el-form-item>
        <el-form-item label="供餐模式：">
          <pb-check :list="scopepriList" @change="SetscopepricingFn($event)"></pb-check>
        </el-form-item>
      </el-form>
    </searchCard>
    <div class="flex-1">
      <pb-card padding="0" height="100%">
        <div class="content-box">
          <ContentOperation>
            <pb-button size="small" plain class="operaleftbtn" v-hasPerm="'center:dishPrice:batch'">批量定价</pb-button>
            <pb-button size="small" plain v-hasPerm="'center:dishPrice:export'">导出</pb-button>
          </ContentOperation>
          <div class="table-box flex">
            <div class="left-tree-box">
              <pb-tree :style="{ maxHeight: treeH }" :treeData="treeData" :defaultProps="treeProps"
                @nodeClick="nodeClick"></pb-tree>
            </div>
            <div class="table-right">
              <el-tabs v-model="activepricing" class="demo-tabs" @tab-click="handdishprifn">
                <el-tab-pane label="已审核菜品" name="one" />
                <el-tab-pane label="未审核菜品" name="two" />
              </el-tabs>
              <pb-table :column="activepricing == 'one' ? bomColumn : bomColumn2" :tableData="dishbomData"
                :indexWidth="60" :bottomElement="['pb-page']">
                <template #pic="{ row }">
                  <img class="Imgs" :src="row.pic ? row.pic : '/src/assets/images/404.png'" alt="">
                </template>
                <template #pricingType="{ row }">
                  {{ gettextprityep(row.pricingType) }}
                </template>
                <template #sellPrice="{ row }">
                  <span>{{ row.sellPrice }}</span>
                  <p class="divider mr-2 ml-2" v-show="auditStatus == 1 && row.sellPrice != null"></p>
                  <pb-button text size="small" @click="setisVisibleFn(row, 'sellPrice')"
                    v-show="auditStatus == 1 && row.sellPrice != null">历史</pb-button>
                </template>
                <template #roi="{ row }">
                  <span>{{ row.roi == null ? '' : row.roi >= 0 ? (row.roi === 0 ? '0%' : row.roi + '%') : '' }}</span>
                  <p class="divider mr-2 ml-2" v-show="auditStatus == 1 && row.roi != null"></p>
                  <pb-button text size="small" @click="setisVisibleFn(row, 'pricingTypeRoiRate')"
                    v-show="auditStatus == 1 && row.roi != null">历史</pb-button>
                </template>
                <template #operate="{ row }">
                  <div class="flex">
                    <div v-hasPerm="'center:dishPrice:check'">
                      <PopconfirmButton v-if="auditStatus == 0" text="审核" content="确认通过菜品审核？" @confirm="examineFn(row)">
                      </PopconfirmButton>
                      <p class="divider mr-2 ml-2" v-show="auditStatus == 0"></p>
                    </div>
                    <div v-hasPerm="'center:dishPrice:edit'">
                      <pb-button text size="small" @click="editBomfn(row)">编辑</pb-button>
                      <p class="divider mr-2 ml-2" v-show="auditStatus == 1"></p>
                    </div>
                    <pb-button text size="small" @click="setisVisibleFn(row)" v-hasPerm="'center:dishPrice:view'"
                      v-show="auditStatus == 1">菜品信息</pb-button>

                  </div>
                </template>
              </pb-table>
              <pb-pagination v-model:currentPage="pageObj.currentPage" v-model:pageSize="pageObj.pageSize"
                @onChange="currentChange" :total="pageObj.total"></pb-pagination>
            </div>
          </div>
        </div>
      </pb-card>
    </div>
    <pb-drawer v-model="isVisible" :title="'查看菜品信息'" :direction="'btt'" :size="'92%'" @cancelFn="CancelFn"
      @confirmFn="confirmFn" v-if="isVisible">
      <div class="flex drawerdiv m-t3">
        <div class="left">
          <img :src="Bomdetails.pic" alt="">
        </div>
        <div class="center1">
          <div>
            <div><span>菜品编码：</span><span>{{ Bomdetails.dishCode }}</span></div>
            <div><span>助记码：</span><span>{{ Bomdetails.mnemonicCode }}</span></div>
            <div><span>技法：</span><span>{{ Bomdetails.skill }}</span></div>
            <div><span>原料类别：</span><span>{{ Bomdetails.materialCategory }}</span></div>
          </div>
          <div class="m-tb">
            <div><span>菜品名称：</span><span>{{ Bomdetails.dishName }}</span></div>
            <div><span>生熟比：</span><span>{{ Bomdetails.curingRate }}</span></div>
            <div><span>口味：</span><span>{{ Bomdetails.taste }}</span></div>
            <div class="warps"><span>标签：</span>
              <div class="lists">
                <div v-for="(ele, index) in Bomdetails.dishTargetAttributeNames" :key="index">
                  {{ ele }}
                </div>
              </div>
            </div>
          </div>
          <div>
            <div><span>菜品分类：</span><span>{{ Bomdetails.dishTypeName }}</span></div>
            <div><span>份重(熟)：</span><span>{{ Bomdetails.dishWeight }}</span></div>
            <div><span>供餐模式：</span><span>{{ Bomdetails.dishUseScopeName }}</span></div>
          </div>
        </div>
        <div class="videos">
          <div class="title m-b2">工艺视频：</div>
          <Videos class="vmp4" v-if="Bomdetails.video && Bomdetails.video != ''" :videoSrc="Bomdetails.video"
            width="136" height="74">
          </Videos>
          <div class="vmp4" v-else>暂无视频</div>
        </div>
        <div class="right">
          <div class="title">
            烹饪方法：
          </div>
          <div>
            {{ Bomdetails.cookingMethods }}
          </div>
        </div>
      </div>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="定价信息" name="first">
          <Prcinfo :Bomdata="Bomdata" />
        </el-tab-pane>
        <el-tab-pane label="BOM信息" name="second">
          <Bominfo :Bomdata="Bomdata" />
        </el-tab-pane>
        <el-tab-pane label="耗材BOM" name="third">
          <Consum :Bomdata="Bomdata">
          </Consum>
        </el-tab-pane>
        <el-tab-pane label="历史定价" name="fourth">
          <HistoryPic :Bomdata="Bomdata">

          </HistoryPic>
        </el-tab-pane>
      </el-tabs>
      <template #footer></template>
    </pb-drawer>
    <Edit :isVisibles="EditisVisible" :Bomdetails="edittails" :newbomBomdetails="Bomdetails" :Bomdata="Bomdata"
      @OffEdit="OffEdit" @sendedit="sendedit" v-if="EditisVisible" />
  </div>
</template>

<script lang="ts" setup>
import videoUrl from '@/assets/images/devceshi.mp4';
import Prcinfo from './components/prcinfo.vue'
import Bominfo from './components/bominfo.vue'
import Edit from './components/editbom.vue'
import Consum from './components/Consuminfo.vue'
import HistoryPic from './components/historypic.vue'
import { GetDishPricingListApi, getDishTypeApi, GttDishBomDetalApi, AuditDishPricingApi, GetDishTypeValueListApi, GetDishPricingApi } from '@/api/Dashmana'
const activepricing = ref('one')
const Bomdetails = ref({} as any)
const edittails = ref({} as any)
const treeData = ref([] as any)
const treeProps = { children: "children", label: "dishTypeName" };
const isVisible = ref(false)
const activeName = ref('first')
let auditStatus = ref(1)
const handdishprifn = (val: any) => {
  if (val.props.name == 'two') {
    auditStatus.value = 0
  } else {
    auditStatus.value = 1
  }
  getDataFn()
}
const gettextprityep = (text: string) => {
  if (text == 'portion') {
    return '计份'
  } else if (text == 'weight') {
    return '计重'
  } else {
    return '投产比'
  }
}
const priListOrigin = () => [
  { label: "全部", val: '', checked: true },
  { label: "计份", val: 'portion', checked: false },
  { label: "计重", val: 'weight', checked: false },
  { label: "投产比", val: 'roi', checked: false }
];
const priList = ref(priListOrigin())
const examineFn = (row: any) => {
  AuditDishPricingApi({
    dishId: row.dishId
  }).then(res => {
    getDataFn()
  })
}
const clearObjKey = (clearForm: any) => {
  Object.keys(clearForm).forEach((key: any) => {
    if (Array.isArray(clearForm[key])) {
      // 如果属性是数组，则清空数组
      clearForm[key].length = 0;
    } else if (typeof clearForm[key] === 'number') {
      // 若属性为数字类型，则设为null
      clearForm[key] = null;
    } else {
      // 如果属性不是数组，则设置为默认值（默认为空字符串）
      clearForm[key] = '';
    }
  });
}
const SetpricingFn = (el: any) => {
  dishbomForm.pricingType = el.val
  getDataFn()
}
const nodeClick = (data: any) => {
  dishbomForm.dishTypeCode = data.curNode.dishTypeCode
  getDataFn()
};
const Bomdata = reactive({} as any)
const EditisVisible = ref(false)
const editBomfn = (row: any) => {
  clearObjKey(edittails.value)
  edittails.value = JSON.parse(JSON.stringify(row))
  Bomdata.dishName = row.dishName
  Bomdata.dishId = row.dishId
  Bomdata.dishCode = row.dishCode
  EditisVisible.value = true
}
const sendedit = () => {
  EditisVisible.value = false
  getDataFn()
}
const OffEdit = () => {
  EditisVisible.value = false
}
const CancelFn = () => {
  isVisible.value = false
}
const confirmFn = () => {
  isVisible.value = false
}
let treeH = ref(null)
const getNodeDishType = async () => {
  treeData.value.length = 0
  getDishTypeApi({
    type: 'weight'
  }).then(res => {
    treeData.value.push({
      dishTypeCode: '',
      dishTypeName: '全部',
      children: res.data
    })
    getDataFn()

    var height = document.getElementsByClassName("pb-table");
    treeH.value = height[0].offsetHeight + "px";

    window.addEventListener("resize", () => {
      height = document.getElementsByClassName("pb-table");

      treeH.value = height[0].offsetHeight + "px";
    });
  })
}
const handleClick = () => {

}
const dishbomForm = reactive({
  dishCode: '',
  dishName: '',
  spuName: '',
  pricingType: '',
  dishTypeCode: '',
  useScopeAttributeId: null
})
const pageObj = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10,
})

const setisVisibleFn = (row: any, text = '') => {
  Object.assign(Bomdetails.value, {})
  if (text != '') {
    Bomdata.ActiveName = text
    activeName.value = 'fourth'
  } else {
    Bomdata.ActiveName = ''
    activeName.value = 'first'
  }
  Bomdata.dishName = row.dishName
  Bomdata.dishId = row.dishId
  Bomdata.dishCode = row.dishCode
  GttDishBomDetalApi({ dishCode: row.dishCode }).then((res: any) => {
    Bomdetails.value = res.data
  })
  isVisible.value = true;

}
const currentChange = () => {
  getDataFn()
}
const bomColumn = reactive([
  {
    slot: "pic",
    name: "图片",
    width: 50
  },
  {
    key: "dishCode",
    name: "菜品编码",
    width: 60,
    align: "right",
  },
  {
    key: "dishName",
    name: "菜品名称",
    width: 60
  },
  {
    key: "dishTypeName",
    name: "菜品分类",
    width: 60
  },
  {
    key: 'dishUseScopeName',
    name: '供餐模式',
    width: 60
  }, {
    key: "totalCost",
    name: "合计成本(元)",
    width: 65,
    align: "right",
  }, {
    slot: "sellPrice",
    name: "售价(元)",
    width: 55,
    align: "right",
  }, {
    slot: "roi",
    name: "投入产出比(%)",
    width: 65,
    align: "right",
  }, {
    slot: "pricingType",
    name: "定价方式",
    width: 55,
  },
  {
    slot: "operate",
    name: "操作",
  },
]);
const bomColumn2 = reactive([
  {
    slot: "pic",
    name: "图片",
    width: 50
  },
  {
    key: "dishCode",
    width: 60,
    name: "菜品编码",
  },
  {
    key: "dishName",
    width: 60,
    name: "菜品名称",
  },
  {
    key: "dishTypeName",
    width: 60,
    name: "菜品分类",
  }, {
    key: 'dishUseScopeName',
    name: '供餐模式',
    width: 80
  }, {
    key: "totalCost",
    name: "合计成本(元)",
    width: 65,
  }, {
    slot: "pricingType",
    name: "定价方式",
    width: 55,
  },
  {
    key: "dataSource",
    name: "来源",
    width: 55,
  },
  {
    slot: "operate",
    name: "操作",
  },
]);
const dishbomData = ref([] as any)
const searchFn = () => {
  getDataFn()
}
const resetFn = () => {
  clearObjKey(dishbomForm)
  scopepriList.value.map(el => {
    el.checked = false
  })
  priList.value.map(el => {
    el.checked = false
  })
  priList.value[0].checked = true
  scopepriList.value[0].checked = true
  getDataFn()
}
const getDataFn = () => {
  dishbomData.value.length = 0
  GetDishPricingListApi({
    "currentPage": pageObj.currentPage,
    "pageSize": pageObj.pageSize,
    "sortingFields": [
      {
        "field": "",
        "order": ""
      }
    ],
    "dishCode": dishbomForm.dishCode,
    "dishName": dishbomForm.dishName,
    "pricingType": dishbomForm.pricingType,
    "auditStatus": auditStatus.value,
    "dishTypeCode": dishbomForm.dishTypeCode,
    "useScopeAttributeId": dishbomForm.useScopeAttributeId
  }).then((res: any) => {
    dishbomData.value = res.data.records
    pageObj.total = res.data.total
  })
}
const scopepriList = ref([{
  label: '全部',
  val: null,
  checked: true
}] as any)

const SetscopepricingFn = (el: any) => {
  dishbomForm.useScopeAttributeId = el.val
  getDataFn()
}
onMounted(() => {
  getNodeDishType()
  GetDishTypeValueListApi({
    "currentPage": 0,
    "pageSize": -1,
    "sortingFields": [
      {
        "field": "",
        "order": ""
      }
    ],
    "dishAttributeType": ""
  }).then((res) => {
    res.data.records.forEach((el: any) => {

      if (el.dishAttributeType == 'scope') {
        scopepriList.value.push({
          label: el.dishAttributeValue,
          val: el.dishAttributeValueId,
          checked: false
        })
      }
      scopepriList.value[0].checked = true
    })
  })
  if (sessionStorage.getItem('dishmanageObj')) {
    let parmas = JSON.parse(sessionStorage.getItem('dishmanageObj'))
    sessionStorage.removeItem('dishmanageObj')
    GetDishPricingApi({
      dishCode: parmas.dishCode
    }).then(res => {
      editBomfn({ ...res.data, ...parmas })
    })
    // editBomfn({ ...parmas })
  }
})
</script>

<style lang="scss" scoped>
// ::v-deep thead th {
//   background: #F5F5F5 !important;
//   padding: 9px 5px !important;
//   font-weight: 400;
//   font-size: 14px;
//   color: rgba(0, 0, 0, 0.65);
// }

.dispricing {
  .left-tree-box {
    width: 15.6%;
  }

  .Imgs {
    width: 38px;
    height: 38px;
  }

  .table-right {
    flex: 1;
    padding: 16px;
    box-sizing: border-box;

    .ceshi {
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  .operaleftbtn {
    margin-right: 24px;
  }

  .Frompopup {
    .top {
      margin-top: 8px;

      span:first-child {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.65);
        font-style: normal;
        text-transform: none;
      }

      span:last-child {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
        font-style: normal;
        text-transform: none;
      }
    }

    .footers {
      margin-bottom: 8px;
    }
  }

  .drawerdiv {
    .left {
      margin-right: 16px;
      margin-bottom: 48px;

      img {
        width: 104px;
        height: 104px;
      }
    }

    .center1 {
      width: 744px;

      .m-tb {
        margin: 16px 0;
      }

      >div {
        display: flex;

        >div:first-child {
          width: 25%
        }

        >div:nth-child(2) {
          width: 25%
        }

        >div:nth-child(3) {
          width: 22%
        }

        >div:nth-child(4) {
          flex: 1;
        }

        >div {

          >span:first-child {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.65);
            font-style: normal;
            text-transform: none;
          }

          >span:last-child {
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.85);
            font-style: normal;
            text-transform: none;
          }
        }
      }

      // margin-right: 40px;
    }

    .videos {
      border-left: 1px solid rgba(0, 0, 0, 0.10);
      border-right: 1px solid rgba(0, 0, 0, 0.10);
      text-indent: 40px;

      .vmp4 {
        width: 136px;
        height: 74px;
        margin: 0 40px;

      }
    }

    .right {
      padding: 0 0 0 40px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85);
      text-transform: none;
    }

    .title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.65);
      font-style: normal;
      text-transform: none;
    }

    .warps {
      position: relative;

      .lists {
        position: absolute;
        display: flex;
        flex-wrap: wrap;
        left: 50px;
        top: -10px;

        // top: 3px;
        // width: 150px;
        >div {
          color: #0D968B;
          border-radius: 2px 2px 2px 2px;
          border: 1px solid #2BD4BD;
          padding: 0 4px;
          margin-right: 8px;
          margin-top: 10px;
        }
      }
    }
  }

  .checks {
    cursor: pointer;
  }
}
</style>
